<template>
  <div class="write">
    <div class="write-title">
      <el-input
        resize="none"
        type="textarea"
        autosize
        placeholder="请输入标题"
        class="me-write-input"
      >
      </el-input>
    </div>
    <div class="write-down">
      <mavon-editor
        class="me-editor"
        ref="md"
        v-model="content"
        @imgAdd="uploadImg"
      />
    </div>
  </div>
</template>

<script>
  import MarkdownIt from 'markdown-it';
  //  markdown编辑器
  import Vue from 'vue';
  import mavonEditor from 'mavon-editor';
  import 'mavon-editor/dist/css/index.css';
  Vue.use(mavonEditor);

  export default {
    name: 'BlogWrite',
    props: {
      editor: Object,
    },
    methods: {
      uploadImg(pos, file) {
        var formData = new FormData();
        formData.append('img', file);
        // 上传图片 接口
        richTextImgUpload(formData).then(res => {
          console.log(res);
          if (res.error == 0) {
            // 将后端返回的地址替换即可
            this.$refs.md.$img2Url(
              pos,
              process.env.VUE_APP_BASE_API_ORIGIN + res.data.imgscr,
            );
          }
        });
      },
    },

    computed: {
      markdown() {
        const md = new MarkdownIt();
        const result = md.render(this.content);
        return result;
      },
    },
    data() {
      return {
        content: '',
        articleForm: {
          editor: {
            value: '',
            ref: '', //保存mavonEditor实例  实际不该这样
            default_open: 'edit',
            toolbars: {
              bold: true, // 粗体
              italic: true, // 斜体
              header: true, // 标题
              underline: true, // 下划线
              strikethrough: true, // 中划线
              mark: true, // 标记
              superscript: true, // 上角标
              subscript: true, // 下角标
              quote: true, // 引用
              ol: true, // 有序列表
              ul: true, // 无序列表
              imagelink: true, // 图片链接
              code: true, // code
              fullscreen: true, // 全屏编辑
              readmodel: true, // 沉浸式阅读
              help: true, // 帮助
              undo: true, // 上一步
              redo: true, // 下一步
              trash: true, // 清空
              navigation: true, // 导航目录
              //subfield: true, // 单双栏模式
              preview: true, // 预览
            },
          },
        },
      };
    },
  };
</script>

<style>
  .write {
    display: flex;
    width: 100vw;
    height: 100vh;
  }
  .write-down {
    /* position: absolute; */
    display: flex;
    margin-bottom: 100px;
    margin-top: 100px;
    margin-left: 18.5%;
  }
  .write-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .me-write-input textarea {
    font-size: 32px;
    font-weight: 600;
    height: 20px;
    border: none;
  }
  .me-write-editor {
    min-height: 650px !important;
  }
  .v-note-wrapper {
    z-index: 9 !important;
  }
  .v-note-wrapper.shadow {
    max-width: 1000px;
    height: 500px;
    /* height: 750px; */
  }
</style>
